// MyCluster
<template>
  <section class="MyCluster">
    <my-map
      :adapter="adapter"
      width="100%"
      height="100%"
      ref="myMap"
      :min-zoom="4"
      :max-zoom="19"
      :center="center"
      projection="EPSG:3857"
      style="cursor: pointer"
      @ready="mapReady"
    >
      <my-map-scale />
      <my-map-zoom />
      <my-map-cluster
        v-if="clusterData"
        :data="clusterData"
        :style-creator="styleCreator"
        :distance="300"
        @click="fitView"
      />
      <my-map-polygon v-if="polygonData" :coordinates="polygonData" ref="polygon"></my-map-polygon>
    </my-map>
  </section>
</template>

<script>
import {
  MyMap,
  MyMapScale,
  MyMapZoom,
  MyMapPlacement,
  MyMapMarker,
  MyMapLine,
  MyMapPointer,
  MyMapDraw,
  MyMapCluster,
  MyMapPolygon
} from "$ui/map";
import { MyContextmenu } from "$ui";
import { transform } from "ol/proj";
import { Vector, OSM, Cluster } from "ol/source";
import { Point } from "ol/geom";
import Polygon from 'ol/geom/Polygon';
import { Vector as layerVector } from "ol/layer";
import {
  Style as styleStyle,
  Icon as styleIcon,
  Circle as styleCircle,
  Stroke as styleStroke,
  Fill as styleFill,
  Text as styleText,
} from "ol/style";
import Feature from "ol/Feature";
import olView from "ol/View";

export default {
  name: "MyCluster",
  components: {
    MyMap,
    MyMapScale,
    MyMapZoom,
    MyMapPlacement,
    MyMapMarker,
    MyMapLine,
    MyMapPointer,
    MyMapDraw,
    MyContextmenu,
    MyMapCluster,
    MyMapPolygon,
  },
  data() {
    return {
      adapter: {
        type: "XYZ",
        url:
          "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scl=1&style=7",
      },
      center: transform(
        [parseFloat(118.120866), parseFloat(24.497659)],
        "EPSG:4326",
        "EPSG:3857"
      ),
      olMap: "",
      myMap: "",
      cluster: "",
      clusterData: null,
      styleCreator: function (feature, resolution) {
        var size = feature.get("features").length;
        if (size == 1) {
          return new styleStyle({
            image: new styleIcon({
              src: "img/location.png",
            }),
          });
        } else if (size < 20) {
          return new styleStyle({
            image: new styleIcon({
              src: 'img/m0.png'
            }),
            text: new styleText({
              text: size.toString(),
              offsetY: 2,
              offsetX: 1,
              fill: new styleFill({
                color: "white",
                padding: '20px'
              }),
            }),
          });
        } else {
          return new styleStyle({
            image: new styleCircle({
              radius: 60,
              stroke: new styleStroke({
                color: "white",
              }),
              fill: new styleFill({
                color: "green",
              }),
            }),
            text: new styleText({
              scale: 2,
              text: size.toString(),
              fill: new styleFill({
                color: "white",
              }),
            }),
          });
        } 
      },
      // styleCreator: {
      //   fill: "red",
      //   radius: 10,
      //   strokeWidth: 3,
      //   strokeColor: "yellow",
      //   textFill: "#fff",
      //   scaleSeed: 0.1,
      // },
      polygonData: null
    };
  },
  computed: {
    // zoom: function() {
    //   return this.olMap.getView ? this.olMap.getView().getZoom() : 0
    // }
  },
  watch: {
    // zoom:{
    //   handler(val) {
    //     if (val != 0 && val == this.olMap.getView().getMaxZoom()) {
    //       this.cluster.setDistance(0);
    //     }
    //     else {
    //       this.cluster.setDistance(100);
    //     }
    //   }
    // }
  },
  mounted() {
    //  console.log(Point)
    this.getClusterData();
    console.log(this.$ocean.wgs84togcj02(110.980331, 21.671493))
  },
  methods: {
    // 调整视口
    fitView(e,feature) {
      this.$ocean.olUtil.fitView(this.olMap,feature)
      // let data = feature.get('features')
      // let extent = this.$ocean.olUtil.calcExtent(data)
      // let extent = this.calcExtent(data)
      // let polygonData = [
      //   [extent.minLng, extent.minLat],
      //   [extent.minLng, extent.maxLat],
      //   [extent.maxLng, extent.maxLat],
      //   [extent.maxLng, extent.minLat],
      //   [extent.minLng, extent.minLat],
      // ]
      // let polygon = new Polygon([polygonData])
      // this.olMap.getView().fit(polygon.getExtent(),{
      //   size: this.olMap.getSize(),
      //   padding: [40,20,20,20],
      //   duration: 1000
      // })
    },
    // 计算多点范围
    calcExtent(points) {
      let minLng = 0
      let maxLng = 0
      let minLat = 0
      let maxLat = 0
      points.forEach(item => {
        let point = item.get('data')
        point.coordinate[0]
        point.coordinate[1]
        if (point.coordinate[0] > maxLng) {
          maxLng = point.coordinate[0]
        } else if (point.coordinate[0] < minLng || minLng === 0) {
          minLng = point.coordinate[0]
        }
        if (point.coordinate[1] > maxLat) {
          maxLat = point.coordinate[1]
        } else if (point.coordinate[1] < minLat || minLat === 0) {
          minLat = point.coordinate[1]
        }
      })
      return {minLng,maxLng,minLat,maxLat}
    },
    // 地图初始化完成
    mapReady(map, vm) {
      // console.log(map, vm);
      this.olMap = map;
      this.myMap = vm;
      
    },
    // 添加测试图层
    getClusterData() {
      // 随机创建1000个要素
      // let source = new Vector();
      // for (let i = 1; i <= 2000; i++) {
      //   let coordinates = [117.5 + Math.random(), 24.5 + Math.random()];
      //   coordinates = transform(coordinates, "EPSG:4326", "EPSG:3857");
      //   let feature = new Feature(new Point(coordinates));
      //   source.addFeature(feature);
      // }
      let clusterData = [];
      for (let i = 0; i < 20000; i++) {
        let coordinate = [117.5 + Math.random(), 24.5 + Math.random()]
        clusterData.push({
          coordinate: transform(coordinate, "EPSG:4326", "EPSG:3857")
        })
      }
      this.clusterData = clusterData
    },
  },
};
</script>

<style lang="scss" scoped>
.MyCluster {
  height: 100%;
  width: 100%;
}
</style>
